import React, { useState } from 'react';
import './App.css';
import KeyManager from './components/KeyManager';
import ServerConnection from './components/ServerConnection';
import KeyUploader from './components/KeyUploader';

function App() {
  const [currentStep, setCurrentStep] = useState(1);
  const [keyExists, setKeyExists] = useState(false);
  const [sshConnected, setSshConnected] = useState(false);
  const [serverInfo, setServerInfo] = useState({
    host: '',
    port: '22',
    username: '',
    password: ''
  });

  const handleKeyStatusChange = (exists) => {
    setKeyExists(exists);
    if (exists) {
      setCurrentStep(2);
    }
  };

  const handleConnectionStatusChange = (connected, info) => {
    setSshConnected(connected);
    if (connected) {
      setCurrentStep(3);
    }
    if (info) {
      setServerInfo(info);
    }
  };

  const handleServerInfoChange = (info) => {
    setServerInfo(info);
  };

  const renderStepIndicator = () => {
    const steps = [
      { number: 1, title: '本地SSH密钥', completed: keyExists },
      { number: 2, title: '服务器连接', completed: sshConnected },
      { number: 3, title: '上传公钥', completed: false }
    ];

    return (
      <div className="step-indicator">
        {steps.map((step, index) => (
          <div key={step.number} className={`step ${step.completed ? 'completed' : ''} ${currentStep === step.number ? 'current' : ''}`}>
            <div className="step-number">{step.number}</div>
            <div className="step-title">{step.title}</div>
            {index < steps.length - 1 && <div className="step-line" />}
          </div>
        ))}
      </div>
    );
  };

  return (
    <div className="app-container">
      <h1 className="center-title">SSH免密配置工具</h1>
      {renderStepIndicator()}
      
      <div className="section">
        <KeyManager onKeyStatusChange={handleKeyStatusChange} />
      </div>
      
      {currentStep >= 2 && (
        <div className="section">
          <ServerConnection onConnectionStatusChange={(connected) => handleConnectionStatusChange(connected, serverInfo)} serverInfo={serverInfo} onServerInfoChange={handleServerInfoChange} />
        </div>
      )}
      
      {currentStep >= 3 && (
        <div className="section">
          <KeyUploader sshConnected={sshConnected} serverInfo={serverInfo} />
        </div>
      )}
    </div>
  );
}

export default App;